@import "../../style/modules/function";

.lk-custom-header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000;
    padding-right: rpx(200);

    .title {
        flex: 1;
        text-align: center;
        font-size: rpx(36);
        max-width: rpx(350);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 1;
    }

    .icon-list {
        flex: 0 0 rpx(150);
        padding-left: rpx(10);
        display: flex;
        align-items: center;

        .icon {
            width: rpx(70);
            height: rpx(65);
            line-height: rpx(65);
            display: block;
            text-align: center;

            &.back {
                position: relative;
                padding-left: rpx(8);
                display: flex;
                align-items: center;
                justify-content: center;

                &:after {
                    display: block;
                    content: '';
                    width: rpx(20);
                    height: rpx(20);
                    border-left: 2px solid #000;
                    border-bottom: 2px solid #000;
                    transform: rotate(45deg);
                }

                &.hover {
                    border-top-left-radius: rpx(33);
                    border-bottom-left-radius: rpx(33);
                }
            }

            &.home {
                position: relative;
                display: inline-block;
                background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M533.333 136.533C529.067 128 520.533 128 512 128c-8.533 0-17.067 4.267-25.6 8.533l-384 354.134c-8.533 4.266-8.533 12.8-8.533 21.333 0 8.533 4.266 17.067 8.533 21.333 8.533 4.267 17.067 8.534 25.6 8.534 8.533 0 17.067-4.267 25.6-8.534L512 204.8l362.667 337.067c8.533 4.266 17.066 8.533 25.6 8.533 8.533 0 17.066-4.267 25.6-8.533 8.533-4.267 8.533-12.8 8.533-21.334 0-8.533-4.267-17.066-8.533-21.333L533.333 136.533zm221.867 396.8c-17.067 0-34.133 17.067-34.133 34.134v256h-422.4v-256c0-17.067-17.067-34.134-34.134-34.134-17.066 0-34.133 17.067-34.133 34.134V857.6c0 17.067 17.067 34.133 34.133 34.133h486.4c17.067 0 34.134-17.066 34.134-34.133V567.467c4.266-17.067-12.8-34.134-29.867-34.134z'/%3E%3C/svg%3E") no-repeat center center;
                background-size: rpx(48);

                &.hover {
                    border-top-right-radius: rpx(33);
                    border-bottom-right-radius: rpx(33);
                }
            }

            &.hover {
                background-color: transparentize(#b8b8b8, .7);
            }
        }
    }
}
